import { useCallback, useEffect, useState } from "react"

export const useProducts = () => {
	const [isLoading, setIsLoading] = useState(false)
	const [products, setProducts] = useState<
		{
			id: number
			title: string
			description: string
			image: string
		}[]
	>([])

	const fetchProducts = useCallback(async () => {
		try {
			setIsLoading(true)
			const response = await fetch("https://fakestoreapi.com/products")

			if (!response.ok) {
				throw new Error("Failed to fetch products")
			}

			const data = await response.json()
			setProducts(data)
			setIsLoading(false)
		} catch (err) {
			setIsLoading(false)
		}
	}, [])

	useEffect(() => {
		fetchProducts()
	}, [])

	return { isLoading, products }
}
